import React, { Component } from "react";
import { connect } from "react-redux";
import dropByCacheKey from "react-router-cache-route";
import MainLayout from "../../../../component/mainLayout/mainLayout";
import "./AddBankCardPage.scss";
import { InputItem, List, Toast } from "antd-mobile";
import { checkTool } from "plugin-tool-check";
import SendMSGCode from "../../../../component/sendMSGCode/sendMSGCode";
import { channelCode, InterfaceG } from "../../../../config/Config";
import yhTools from "../../../../tools/yh";
const Item = List.Item;
class AddBankCardPage extends Component {
	constructor(props) {
		super(props);
		this.state = {
			objData: JSON.parse(this.props.match.params.data),
			accountNo: "",
			userBankPhone: "",
			allInputFlag: false, //是否全部都输入了值；控制提交按钮是否可点击且置灰
			verifyCode: "", //验证码
			msgSubmitButtStatus: "3", //底部按钮状态 '0':加载中 '1':正在加载 '2':'失败' '3':"正常状态"
			msgSubmitButtText: "确认添加",
			bankText: "银行卡号"
		};
	}

	componentDidMount() {
		// console.log(this.props.match.params.data)
	}

	render() {
		const _pageParams = {
			header: {
				title: "添加新的银行卡"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		let { objData, bankText, sendSuccessPhone, showMsgBox } = this.state;
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="add-bank-card-page">
					<div className="line-1">
						<div className="item-left">{objData.userName}</div>
						<div className="item-right">{objData.idNo}</div>
					</div>
					<div className="line-2">
						<List>
							<Item>
								<label>{bankText}</label>
								<InputItem
									className="input-no-line"
									placeholder="银行卡号(仅支持储蓄卡)"
									type="bankCard"
									maxLength={30}
									// onFocus={this.InputOnFocus.bind(this, "accountNo")}
									// onBlur={this.InputOnBlurFocus.bind(this)}
									onChange={this.InputOnChange.bind(this, "accountNo")}
								/>
							</Item>
							<Item>
								<label>银行预留手机号</label>
								<InputItem
									className="input-no-line"
									placeholder="银行卡预留手机号"
									type="phone"
									// onFocus={this.InputOnFocus.bind(this, "phone")}
									// onBlur={this.InputOnBlurFocus.bind(this)}
									onChange={this.InputOnChange.bind(this, "userBankPhone")}
								/>
							</Item>
						</List>
					</div>
					<a
						className={
							this.state.allInputFlag
								? "submit-btn submit-btn-success"
								: "submit-btn btn-grey"
						}
						id="bottomDom"
						onClick={this.sendMessage.bind(this)}
					>
						<span>下一步</span>
					</a>
				</div>
				<SendMSGCode
					ref={ref => {
						this.sendCode = ref;
					}}
					getYZMCode={this.sendYzm.bind(this)}
					sendSuccessPhone={sendSuccessPhone}
					submitCode={this.submitCode.bind(this)}
					closeSendModal={this.closeSendModal.bind(this)}
					showMsgBox={showMsgBox}
					seconds={60}
				/>
			</MainLayout>
		);
	}
	sendMessage() {
		if (!this.state.allInputFlag) {
			//按钮置灰时不可用
			return false;
		}
		if (!this.state.accountNo) {
			Toast.info("请输入银行卡号", 2);
			return;
		} else if (
			!checkTool.isBankNo({
				valueParams: "" + this.state.accountNo.replace(/\s/g, "")
			})
		) {
			Toast.info("银行卡格式有误", 2);
			return;
		}
		if (!this.state.userBankPhone) {
			Toast.info("请输入预留手机号", 2);
			return;
		} else if (
			!checkTool.isPhoneNo({
				valueParams: "" + this.state.userBankPhone.replace(/\s/g, "")
			})
		) {
			Toast.info("预留手机号输入不正确", 2);
			return;
		}
		let objs = {
			url: InterfaceG.addBankCardBindCard,
			params: {
				channelCode: this.state.objData.channelCode,
				accountNo: this.state.accountNo.replace(/\s/g, ""),
				userBankPhone: this.state.userBankPhone.replace(/\s/g, "")
			},
			_alertShow: false
		};
		let _that = this;
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			Toast.hide();
			if (res.code == "0") {
				_that.sendCode.countdown();
				_that.setState({
					sendSuccessPhone: res.data.sendSuccessPhone,
					messageSerialNumber: res.data.messageSerialNumber,
					showMsgBox: true //显示验证码
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	}

	//短信验证码验证接口
	sendYzm() {
		let _that = this;
		if (!this.state.allInputFlag) {
			//按钮置灰时不可用
			return false;
		}
		let objs = {
			url: InterfaceG.changeCardVcode,
			params: {
				channelCode: channelCode,
				bindCardNo: this.state.selCardList[this.state.selectIndex].bindCardNo
			},
			_alertShow: false
		};
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			Toast.hide();
			if (res.code == "0") {
				_that.sendCode.countdown();
				_that.setState({
					sendSuccessPhone: res.data.sendSuccessPhone,
					messageSerialNumber: res.data.messageSerialNumber,
					showMsgBox: true //显示验证码
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	}
	//提交回调
	submitCode(code) {
		if (code == "" || code.toString().length < 6) {
			Toast.info("请输入六位验证码", 2);
			return;
		}
		let objs = {
			url: InterfaceG.addBankCard,
			params: {
				channelCode: this.state.objData.channelCode,
				accountNo: this.state.accountNo.replace(/\s/g, ""),
				userBankPhone: this.state.userBankPhone.replace(/\s/g, ""),
				verifyCode: code
			},
			_alertShow: false
		};
		let _that = this;
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				setTimeout(() => {
					_that.gotoNextPage();
				}, 100);
			} else {
				Toast.info(res.message, 2);
			}
		});
	}
	//关闭验证码弹框
	closeSendModal() {
		this.setState({
			showMsgBox: false
		});
	}

	//跳转到开通电子账户页面
	gotoNextPage() {
		dropByCacheKey("replaceBankCard");

		setTimeout(() => {
			this.props.history.goBack();
		}, 300);
	}
	InputOnChange(v, value) {
		this.setState(
			{
				[v]: value.trim()
			},
			() => {
				if (v === "accountNo") {
					if (this.state.accountNo) {
						this.setState({
							bankText: "银行卡号（仅支持储蓄卡）"
						});
					} else {
						this.setState({
							bankText: "银行卡号"
						});
					}
				}
				this.checkAllInputText();
			}
		);
	}

	checkAllInputText() {
		if (this.state.accountNo && this.state.userBankPhone) {
			this.setState({
				allInputFlag: true
			});
		} else {
			this.setState({
				allInputFlag: false
			});
		}
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

export default connect(mapStateToProps, mapDispatchToProps)(AddBankCardPage);
